<template>
	<view class="login-container">
		<view class="login-title">
			<view>你好,</view>
			<view>
				欢迎登录
				<span style="color: #0082fe">桌趣</span>
			</view>
			<view class="start">开启你的桌趣之旅</view>
			<view class="tip-text">未注册的手机号验证通过后自动登录</view>
		</view>
		<view class="form-box flex-col-around">
			<view class="phone-value">
				<fui-input isFillet :borderBottom="false" backgroundColor="#f9f9f9" placeholder="请输入手机号码" v-model="phone" class="ipt"></fui-input>
				<fui-input
					isFillet
					:padding="['20rpx', '32rpx']"
					:borderBottom="false"
					margin-top="20"
					backgroundColor="#f9f9f9"
					placeholder="请输入手机验证码"
					v-model="VBCode"
					class="ipt"
				>
					<fui-countdown-verify ref="fui_cdv" border-color="#000" @send="sendCode"></fui-countdown-verify>
				</fui-input>
			</view>
			<view class="btn flex-center">
				<fui-button radius="60rpx" width="88%" :disabled="VBCode != '' ? false : true" @click="handleLogin">登录</fui-button>
			</view>
		</view>

		<!-- 隐私协议 -->
		<view class="private-box flex-center">
			<checkbox-group @change="handlerChange">
				<label class="check-box">
					<checkbox value="agree" />
					我已阅读并同意
					<text>《用户协议》</text>
					和
					<text>《隐私保护政策》</text>
				</label>
			</checkbox-group>
		</view>
		<!-- <button @click="loginMethod">微信登录</button> -->
	</view>
</template>

<script>
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
import { getPhoneNumber, getVerifyCode, login, wxLogin } from '@/api/modules/login.js';
import { showMsg } from '../../utils/interact';
export default defineComponent({
	name: 'login',
	setup() {
		const state = reactive({
			title: '登录',
			phone: '',
			VBCode: '',
			code: '',
			agree: ''
		});
		const fui_cdv = ref(null);
		// 仓库数据
		const sendCode = async () => {
			//手机号正则
			if (!/^\d{11}$/.test(state.phone)) {
				//验证未通过
				showMsg('请输入正确的手机号');
				fui_cdv.value.reset();
			} else {
				//验证通过，发起ajax请求传手机号获取验证码
				try {
					const res = await getVerifyCode({
						phone: state.phone
					});
					// #ifdef APP-PLUS
					plus.nativeUI.toast('验证码已发送', {
						background: '#55ff00',
						verticalAlign: 'top'
					});
					// #endif
					if (res.statusCode !== 200) return showMsg('手机号或验证码错误', 'error');
					fui_cdv.value.success();
				} catch (e) {
					fui_cdv.value.reset();
					//TODO handle the exception
				}
			}
		};

		// 登录
		const handleLogin = async () => {
			try {
				const res = await login({
					phone: state.phone,
					verificationCode: state.VBCode
				});
				if (res.statusCode == 401) {
					showMsg('手机号或验证码错误，若二者都正确，则验证码过期，请重新获取', 'none', 2000);
				} else if (res.statusCode == 200) {
					let {
						data: {
							data: { phone, userId: userID, userPhoto }
						}
					} = res;
					//登录成功，存储相关数据并跳转到首页
					uni.setStorageSync('phone', phone);
					uni.setStorageSync('user_id', userID);
					uni.setStorageSync('avator_url', userPhoto || '');

					uni.switchTab({
						url: '/pages/home/index'
					});
				} else {
					showMsg('登录失败', 'error');
				}
			} catch (e) {
				//TODO handle the exception
			}
		};
		// 勾选用户协议
		function handlerChange(e) {
			state.agree = e.detail.value[0];
			console.log(state.agree);
		}
		// 微信登录
		const loginMethod = () => {
			let code;
			// 获取code
			uni.login({
				provider: 'weixin',
				onlyAuthorize: true,
				success: (res) => {
					code = res.code;

					/* wxLogin({ code })
						.then((res) => {
							console.log(res);
						})
						.catch((err) => {
							console.log(err);
						}); */
					// 获取"encryptedData"和"iv":
					/* uni.getUserInfo({
						provider: 'weixin',
						success(res) {
							console.log(res);
						},
						fail(err) {
							console.log(err);
						}
					}); */
				},
				fail(err) {
					if (err.code == -8) {
						showMsg('请安装微信客户端');
					}
				}
			});
		};

		return {
			...toRefs(state),
			fui_cdv,
			sendCode,
			handleLogin,
			loginMethod,
			handlerChange
		};
	}
});
</script>

<style scoped lang="scss">
.login-container {
	height: 100vh;
	background: $uni-bg-color;
	.login-title {
		margin-left: 40rpx;
		text-align: left;
		padding-top: 100px;

		view {
			font-size: 60rpx;
			font-weight: bold;
			color: #000000;
		}

		.start {
		}
		.tip-text {
			margin-top: 16rpx;
			font-size: $uni-font-size-base;
			font-weight: normal;
		}
	}
	.form-box {
		height: 314px;
		margin-top: 80px;
		.phone-value {
			// margin-bottom: 270rpx;
			.ipt {
				width: auto;
				font-size: 28rpx;
				margin: 0 20px;
			}
		}
	}

	.private-box {
		.check-box {
			:deep() {
				.uni-checkbox-input {
					width: 22rpx;
					height: 22rpx;
					border-radius: $uni-border-radius-circle;
				}
			}
			text {
				color: #0082fe;
			}
		}
	}
	.btn {
	}
}
</style>
